import Touchable from '@/components/Touchable';
import { RootState } from '@/models/index';
import { getActiveRouteName } from '@/utils/';
import { MaterialTopTabBar, MaterialTopTabBarProps } from '@react-navigation/material-top-tabs';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { getStatusBarHeight } from 'react-native-iphone-x-helper';
import LinearAnimatedGradient from 'react-native-linear-animated-gradient-transition';
import { connect, ConnectedProps } from 'react-redux';




const mapStateToProps = (state: RootState, props: MaterialTopTabBarProps) => {
  const routeName = getActiveRouteName(props.state);
  const modelState = state[routeName];
  return {
    linearColors: modelState.carousels && modelState.carousels.length > 0 
      ? (modelState.carousels[modelState.activeCarouselIndex].colors ? modelState.carousels[modelState.activeCarouselIndex].colors : undefined) 
      : undefined,
    gradientVisible: modelState.gradientVisible,
  }
}
const connector = connect(mapStateToProps);
type ModelState = ConnectedProps<typeof connector>;

type IProps = MaterialTopTabBarProps & ModelState;

class TopTabBarWrapper extends React.Component<IProps> {

  goCategory = () => {
    console.log('go category')
    const {navigation} = this.props;
    navigation.navigate("Category");
  }

  get linearGradient() {
    const {
      linearColors = ['#ccc', '#e2e2e2'],
      gradientVisible,
    } = this.props;
    if (gradientVisible) {
      return <LinearAnimatedGradient colors={linearColors} style={styles.gradient}/>
    }
    return null;
  }

  render() {
    let {gradientVisible, indicatorStyle, ...restProps} = this.props;
    let textStyle = styles.text;
    let activeTintColor = '#333';
    if (gradientVisible) {
      textStyle = styles.whiteText;
      activeTintColor = '#fff';
      if (indicatorStyle) {
        indicatorStyle = StyleSheet.compose(indicatorStyle, styles.whiteBackgroundColor)
      }
    }
    
    return (
      <View style={styles.container}>
        {this.linearGradient}
        <View style={styles.topTabBarView}>
          <MaterialTopTabBar  {...restProps} indicatorStyle={indicatorStyle} activeTintColor={activeTintColor} style={styles.tabbar} />
          <Touchable style={styles.categoryBtn}
            onPress={this.goCategory}
          >
            <Text style={textStyle}>分类</Text>
          </Touchable>
        </View>
        <View style={styles.bottom}>
          <Touchable style={styles.searchBtn}>
            <Text style={textStyle}>搜索</Text>
          </Touchable>
          <Touchable style={styles.historyBtn}>
            <Text style={textStyle}>历史记录</Text>
          </Touchable>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    paddingTop: getStatusBarHeight(),
    backgroundColor: '#fff',
  },
  tabbar: {
    elevation: 0,
    flex: 1,
    overflow: 'hidden',
    backgroundColor: 'transparent',
  },
  topTabBarView: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  categoryBtn: {
    paddingHorizontal: 10,
    borderLeftWidth: StyleSheet.hairlineWidth,
    borderLeftColor: '#ccc',
  },
  bottom: {
    flexDirection: 'row',
    paddingVertical: 7,
    paddingHorizontal: 15,
    alignItems: 'center',
  },
  searchBtn: {
    flex: 1,
    paddingLeft: 12,
    height: 30,
    justifyContent: 'center',
    borderRadius: 15,
    backgroundColor: 'rgba(0, 0, 0, 0.1)'
  },
  historyBtn: {
    marginLeft: 24,
  },
  gradient: {
    ...StyleSheet.absoluteFillObject,
    height: 260,
  },
  text: {
    color: '#333',
  },
  whiteText: {
    color: '#fff',
  },
  whiteBackgroundColor: {
    backgroundColor: '#fff'
  }
});

export default connector(TopTabBarWrapper);